---
import { links } from './data'
---

<div class="mobile-menu">
    <ul>
        <li>
            <a
                href="/start/introduction/"
                target="__blank"
            >
                Documentation
            </a>
        </li>
        {links.map((link) => (
            <li>
                <a
                    href={link.href}
                    target={link.href.startsWith('http') ? '_blank' : '_self'}
                >
                    {link.name}
                </a>
            </li>
        ))}
    </ul>
</div>
<div class="hamburger">
    <span />
</div>

<style>
    .hamburger {
        height: 18px;
        display: flex;
        padding: 0 16px;
        cursor: pointer;

        @media (min-width: 700px) {
            display: none;
        }

        &--is-active {
            span {
                transform: translateY(7px) rotate(45deg);

                &::before {
                    opacity: 0;
                }

                &::after {
                    transform: translateY(-14px) rotate(-90deg);
                }
            }
        }
    }

    span {
        position: relative;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background-color: var(--white);
        transition: transform 0.3s ease;

        &::before, &::after {
            content: '';
            background-color: var(--white);
            width: 100%;
            height: 2px;
            border-radius: 2px;
            position: absolute;
        }

        &::before {
            top: 7px;
            transition: opacity 0.3s ease;
        }

        &::after {
            top: 14px;
            transition: transform 0.3s ease;
        }
    }

    .mobile-menu {
        width: 100vw;
        height: 100vh;
        position: fixed;
        inset: 0;
        background: linear-gradient(to bottom, rgba(180, 168, 218, 0.9), ease-in-out, rgba(184, 47, 179, 0.9));
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(27px);
        display: flex;
        align-items: center;
        justify-content: center;

        &--is-active {
            opacity: 1;
            pointer-events: all;
        }
    }

    ul {
        display: flex;
        flex-direction: column;
        gap: 40px;
        color: var(--black);
        font-size: 24px;
        text-align: center;
    }
</style>

<script>
    const hamburger = document.querySelector('.hamburger')!
    const mobileMenu = document.querySelector('.mobile-menu')!

    const toggleMenu = () => {
        hamburger.classList.toggle('hamburger--is-active')
        mobileMenu.classList.toggle('mobile-menu--is-active')
        document.body.classList.toggle('no-scroll')
    }

    window.matchMedia('(min-width: 700px)').addEventListener('change', event => {
        if (event.matches && hamburger.classList.contains('hamburger--is-active')) {
            toggleMenu()
        }
    })

    hamburger.addEventListener('click', toggleMenu)
</script>
